<template>
  <span>
    <a-modal
      v-model:visible="Visible"
      :title="'修改' + title"
      :footer="null"
      :keyboard="false"
      :maskClosable="false"
      :closable="false"
      style="top: 20px"
    >
      <a-form
        ref="formRef"
        :model="List"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item label="标题" name="title">
          <a-input v-model:value="List.title" />
        </a-form-item>
        <a-form-item label="金额" name="amount">
          <a-input-number
            size="large"
            :min="0"
            :max="4000"
            :step="0.5"
            v-model:value="List.amount"
          />
        </a-form-item>
        <a-form-item label="支付方式" name="pay">
          <a-select v-model:value="List.payType" :options="options"> </a-select>
        </a-form-item>
        <a-form-item label="时间" required name="outTime">
          <a-date-picker
            :locale="locale"
            v-model:value="List.outTime"
            valueFormat="YYYY-MM-DD HH:mm:ss"
            show-time
            type="date"
            placeholder="请选择时间"
            style="width: 100%"
          />
        </a-form-item>
        <a-form-item label="何事" name="incident">
          <a-textarea v-model:value="List.incident" showCount :maxlength="50" />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="onSubmit">确定</a-button>
          <a-button style="margin-left: 10px" @click="cencelVisible">取消</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </span>
</template>
<script>
import {
  defineComponent,
  getCurrentInstance,
  computed,
  onMounted,
  ref,
  reactive,
} from "vue";
import { message } from "ant-design-vue";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
export default defineComponent({
  props: {
    List: { type: Object },
    Visible: { type: Boolean, default: false },
  },

  setup(props) {
    const { proxy } = getCurrentInstance();
    const formRef = ref("");
    const options = reactive([
      {
        value: 0,
        label: "微信",
      },
      {
        value: 1,
        label: "支付宝",
      },
      {
        value: 2,
        label: "花呗",
      },
      {
        value: 3,
        label: "银行卡",
      },
    ]);
    //金额校验
    let checkAmount = async (rule, value) => {
      if (value) {
        if (value > 2000) {
          return Promise.reject("金额一次不能超过2000元");
        } else {
          return Promise.resolve();
        }
      }
    };
    const rules = {
      title: [
        { required: true, message: "请输入标题", trigger: "blur" },
        { min: 2, max: 17, message: "长度为2到17个汉字", trigger: "blur" },
      ],
      amount: [{ validator: checkAmount, trigger: "change" }],
      outTime: [
        { required: true, message: "请输入具体时间", trigger: "blur", type: "string" },
        { message: "请选择具体时间", trigger: "change", type: "string" },
      ],
      type: [{ required: true, message: "类型有错", trigger: "change" }],
      incident: [
        { required: true, message: "请输入内容", trigger: "blur" },
        { min: 1, max: 50, message: "长度为1到50个汉字", trigger: "blur" },
      ],
    };
    onMounted(() => {
      console.log(proxy);
    });
    const title = computed(() => {
      if (props.Type === "expense") return "支出";
      else return "收入";
    });
    const cencelVisible = () => {
      formRef.value.resetFields();
      proxy.$emit("close");
    };
    //表单
    const onSubmit = () => {
      formRef.value
        .validate()
        .then(() => {
          proxy.$api.post("rmb/update", proxy.List).then((res) => {
            console.log(res);
            if (res.error === 0) {
              message.success(res.message);
            } else message.error(res.message);
            proxy.$emit("close");
          });
        })
        .catch((error) => {
          console.log("error", error);
          message.error("添加失败");
        });
    };
    return {
      locale,
      title,
      options,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      formRef,
      rules,
      cencelVisible,
      onSubmit,
    };
  },
});
</script>
